<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>网易云音乐</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./css/vip.css">


</head>

<body>
   <div class="box">
      <!-- 顶部导航栏通栏开始 -->
      <div class="topbar">

         <!-- 导航栏版心开始 -->
         <div class="m-top">
            <!-- logo部分 -->
            <h1>
               <a href="../index/index.html">
                  <i></i>
               </a>
            </h1>

            <!-- 导航栏选项 -->
            <div class="m-nav">
               <ul>
                  <li>
                     <a href="../index/index.html">发现音乐</a>
                  </li>
                  <li>
                     <a href="../mine/mine.html">我的音乐</a>
                  </li>
                  <li>
                     <a href="#">关注</a>
                  </li>
                  <li>
                     <a href="../Shopping/Shopping.html">商城</a>
                  </li>
                  <li>
                     <a href="../musician/musician.html">音乐人</a>
                  </li>
                  <li>
                     <a href="../download/download.html">下载客户端</a>
                  </li>
               </ul>
            </div>

            <!-- 搜索框区域 -->
            <div class="search">
               <i></i>
               <input type="search" placeholder="音乐/视频/电台/用户">
            </div>

            <!-- 创作者中心 -->
            
            <div class="creator"><a href="../create/create.html">创作者中心</a></div>

            <!-- 头像区域 -->
            <div class="headPortrait">
               <img src="./images/headPortrait.jpg" alt="">
               <!-- 鼠标经过头像下拉框 -->
               <div class="dropDownBox">
                  <div class="transparent-box"></div>
                  <ul>
                     <li>
                        <a href="../user/user.html">
                           <i></i>
                           <em>我的主页</em>
                        </a>
                     </li>
                     <li>
                        <a href="#">
                           <i></i>
                           <em>我的消息</em>
                        </a>
                     </li>
                     <li>
                        <a href="#">
                           <i></i>
                           <em>我的等级</em>
                        </a>
                     </li>
                     <li>
                        <a href="./vip.html">
                           <i></i>
                           <em>VIP会员</em>
                        </a>
                     </li>
                     <li>
                        <a href="#">
                           <i></i>
                           <em>个人设置</em>
                        </a>
                     </li>
                     <li>
                        <a href="#">
                           <i></i>
                           <em>实名认证</em>
                        </a>
                     </li>
                     <li>
                        <a href="#">
                           <i></i>
                           <em>主播入口</em>
                        </a>
                     </li>
                     <li>
                        <a href="#">
                           <i></i>
                           <em>退出</em>
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         <!-- 导航栏版心结束 -->

      </div>
      <!-- 顶部导航栏通栏结束 -->


      <!-- 内容版心区域开始 -->
      <div class="versionCenter">
         <!--  头部用户信息 -->
         <div class="user-head">
            <span>
               <a href="#">本月已下载的付费歌曲</a>
               <i>></i>
               <a href="#">我购买的单曲</a>
               <i>></i>
            </span>
            <div class="in-fo">
               <!-- 头像左侧部分 -->
               <div class="avatar">
                  <img src="./images/headPortrait.jpg" alt="">
               </div>
               <!-- 头像右侧部分 -->
               <div class="user-content">
                  <div class="user-t-hd">
                     <h2>咕咕咕~</h2>
                     <img src="./images/vip.png" alt="">
                  </div>
                  <p>当前已开通 黑胶SVIP会员</p>
                  <span class="give">买会员赠好友</span>
                  <span class="exchange">使用兑换码</span>
               </div>

            </div>
         </div>

         <!-- 黑胶会员续费模块 -->
         <div class="m-vipcashier-card">
            <!-- 头部vip导航按钮模块 -->
            <div class="vipCa-hd">
               <ul>
                  <li>
                     <span>黑胶VIP</span>
                     <img src="./images/cvip.png" alt="">
                     <i></i>
                  </li>
                  <li>
                     <span>畅听会员</span>
                     <img src="./images/musicPicture.png" alt="">
                     <i></i>
                  </li>
               </ul>
            </div>

            <!-- vip选择价格部分 -->
            <div class="price">
               <!-- 续费价格选择 -->
               <!-- 黑胶VIP -->
               <ul class="ul-one">
                  <li class="product-item a active">
                     <div class="product-item-corner">推荐</div>
                     <div class="product-item-moth">连续包月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">3.8</span>
                     </div>
                     <div class="product-item-desc">
                        <del>￥13</del>
                     </div>
                     <div class="product-item-bottom active">新客限时3折</div>
                  </li>
                  <li class="product-item a ">
                     <div class="product-item-moth">连续包年</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">88</span>
                     </div>
                     <div class="product-item-desc">
                        <del>￥138</del>
                     </div>
                     <div class="product-item-bottom">新客限时6.4折</div>
                  </li>
                  <li class="product-item a ">
                     <div class="product-item-moth">连续包季</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">18</span>
                     </div>
                     <div class="product-item-desc">
                        <del>￥40</del>
                     </div>
                     <div class="product-item-bottom">新客限时4.7折</div>
                  </li>
                  <li class="product-item a">
                     <div class="product-item-moth">12个月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">158</span>
                     </div>
                     <div class="product-item-desc">
                        <del>￥216</del>
                     </div>
                  </li>
                  <li class="product-item a">
                     <div class="product-item-moth">6个月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">88</span>
                     </div>
                     <div class="product-item-desc">
                        <del>￥108</del>
                     </div>
                  </li>
                  <li class="product-item a">
                     <div class="product-item-moth">3个月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">45</span>
                     </div>
                     <div class="product-item-desc">
                        <del>￥54</del>
                     </div>
                  </li>
                  <li class="product-item a">
                     <div class="product-item-moth">1个月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">16</span>
                     </div>
                     <div class="product-item-desc">
                        <del>￥18</del>
                     </div>
                  </li>
               </ul>

               <!-- 畅听会员 -->
               <ul class="ul-two">
                  <li class="product-item a active">
                     <div class="product-item-corner">推荐</div>
                     <div class="product-item-moth">连续包月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">8</span>
                     </div>
                     <div class="product-item-desc">
                        <span>折合￥8/月</span>
                     </div>
                  </li>
                  <li class="product-item a">
                     <div class="product-item-moth">12个月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">88</span>
                     </div>
                     <div class="product-item-desc">
                        <span>折合￥7.331月</span>
                     </div>
                  </li>
                  <li class="product-item a">
                     <div class="product-item-moth">6个月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">45</span>
                     </div>
                     <div class="product-item-desc">
                        <span>折合￥7.5/月</span>
                     </div>
                  </li>
                  <li class="product-item a">
                     <div class="product-item-moth">1个月</div>
                     <div class="product-item-origin">
                        <span class="product-item-origin-label">￥</span>
                        <span class="product-item-origin-finalprice">8</span>
                     </div>
                     <div class="product-item-desc">
                        <span>折合￥8/月</span>
                     </div>
                  </li>
               </ul>

               <!-- 续费优惠提示 -->
               <div class="m-vipcashier-product-desc">
                  到期自动续费，可取消；优惠仅限1次
                  <img src="./images/sayHello.png" alt="">
               </div>

               <!-- 选择优惠券 -->
               <div class="m-vipcashier-coupon">
                  <!-- 优惠方式提示文字 -->
                  <div class="choice-coupon">
                     <span>选择优惠券</span>
                     <i>兑换优惠券</i>
                  </div>
                  <!-- 下拉选择框 -->
                  <div class="dropDownBox-coupon">
                     <input type="text" placeholder="该套餐无可使用的优惠券">
                     <span>无可用优惠券</span>
                  </div>

                  <!-- 兑换码输入框 -->
                  <div class="exchangeCode">
                     <input type="text" placeholder="请输入优惠券兑换码">
                     <button>兑换</button>
                  </div>
               </div>

               <!-- 支付方式 -->
               <div class="payment">
                  <h3>支付方式</h3>
                  <div class="qrCode">
                     <img class="imgWx" src="./images/wxQrCode.png" alt="">
                     <img class="imgZfb" src="./images/zfbqrCode.png" alt="">
                     <div class="choice">
                        <p>点击图标切换，使用支付宝、微信扫码支付</p>
                        <div class="paymentIcon">
                           <span class="zfb"></span>
                           <span class="wx"></span>
                        </div>
                        <div class="money">
                           <span>3.8</span>元
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <!-- 黑胶VIP特权 -->
         <div class="m-privilege">
            <h2>黑胶VIP特权</h2>
            <ul>
               <li>
                  <img src="./images/01hyqk.png" alt="">
                  <p>会员曲库</p>
               </li>
               <li>
                  <img src="./images/02mfxz.png" alt="">
                  <p>免费下载</p>
               </li>
               <li>
                  <img src="./images/03ls.png" alt="">
                  <p>铃声</p>
               </li>
               <li>
                  <img src="./images/04lsrt.png" alt="">
                  <p>历史日推</p>
               </li>
               <li>
                  <img src="./images/05gctp.png" alt="">
                  <p>歌词图片</p>
               </li>
               <li>
                  <img src="./images/06wsyz.png" alt="">
                  <p>无损音质</p>
               </li>
               <li>
                  <img src="./images/07ggtq.png" alt="">
                  <p>广告特权</p>
               </li>
               <li>
                  <img src="./images/08jytx.png" alt="">
                  <p>鲸云音效</p>
               </li>
               <li>
                  <img src="./images/09txgj.png" alt="">
                  <p>头像挂件</p>
               </li>
               <li>
                  <img src="./images/10gxpf.png" alt="">
                  <p>个性皮肤</p>
               </li>
            </ul>
         </div>

         <!-- VIP专享曲库 -->
         <div class="n-special">
            <h2>VIP专享下载曲库</h2>
            <div class="slogan">畅享2603万首VIP下载歌曲</div>
            <div class="song">
               <div class="more">
                  <a href="https://music.163.com/#/member/album">查看全部</a>
                  <i>></i>
               </div>
               <ul class="songList">
                  <li>
                     <a href="#">
                        <img src="./images/1songList.jpg" alt="">
                        <span></span>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <img src="./images/2songList.jpg" alt="">
                        <span></span>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <img src="./images/3songList.jpg" alt="">
                        <span></span>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        <img src="./images/4songList.jpg" alt="">
                        <span></span>
                     </a>
                  </li>
               </ul>
            </div>
         </div>

         <!-- 续费协议部分 -->
         <div class="n-faq">
            <a href="https://y.music.163.com/m/at/prime-membership-contract">付费会员服务协议</a>
            <a href="https://y.music.163.com/m/at/vipAutopay">自动续费服务协议</a>
            <span>常见问题解答</span>
         </div>
      </div>
      <!-- 内容版心区域结束 -->


      <!-- 底部版权信息部分开始 -->
      <div class="copyright">
         <!-- 底部版心 -->
         <div class="copyright-b">
            <!-- 底部左边版权信息 -->
            <div class="address-left">
               <p>
                  <a href="#">服务条款</a>
                  <span>|</span>
                  <a href="#">隐私政策</a>
                  <span>|</span>
                  <a href="#">儿童隐私政策</a>
                  <span>|</span>
                  <a href="#">版权投诉指引</a>
                  <span>|</span>
                  <a href="#">意见反馈</a>
               </p>
               <p>网易公司版权所有©1997-2022杭州乐读科技有限公司运营：<a href="#">浙网文2018]3506-263号</a></p>
               <p>违法和不良信息举报电话：0571-89853516举报邮箱：<a href="#">ncm5990@163.c0m</a></p>
               <p>粤B2-20090191-18 &nbsp<a href="#">工业和信息化部备案管理系统网站</a></p>
            </div>
            <!-- 底部右边图标 -->
            <div class="icon-right">
               <ul>
                  <li>
                     <a href="#"></a>
                     <span>用户认证</span>
                  </li>
                  <li>
                     <a href="#"></a>
                     <span>独立音乐人</span>
                  </li>
                  <li>
                     <a href="#"></a>
                     <span>赞赏</span>
                  </li>
                  <li>
                     <a href="#"></a>
                     <span>视频奖励</span>
                  </li>
               </ul>
            </div>
         </div>

      </div>
      <!-- 底部版权信息部分结束 -->

      <!-- 网页底部 -->
      <div class="f-updown">
         <!-- 锁 -->
         <div class="locks">
            <div class="lock">
               <a href="#" class="button"></a>
            </div>
            <div class="lock-right"></div>
         </div>
         <!-- 背景图 -->
         <div class="background"></div>
         <div class="hand"></div>
         <!-- 播放部分 -->
         <div class="f-play-music">
            <div class="btns">
               <a href="#" class="prev"></a>
               <a href="#" class="play"></a>
               <a href="#" class="next"></a>
            </div>
            <div class="def-cover">
               <img src="./images/default_album.jpg" alt="">
               <a href="#"></a>
            </div>
            <div class="play-process">
               <div class="words"></div>
               <!-- 外部容器 -->
               <div class="pbar">
                  <!-- 包裹进度条 -->
                  <div class="barbg">
                     <!-- 进度条 -->
                     <div class="ready">
                        <!-- 圆角 -->
                        <div class="curser">
                           <span class="btn"></span>
                        </div>
                     </div>
                  </div>
                  <span class="time">
                     <em>00:00</em>
                     / 00:00
                  </span>

               </div>
            </div>
            <!-- 收藏分享部分 -->
            <div class="operations">
               <a href="#" class="icn icn-pip"></a>
               <a href="#" class="icn icn-add"></a>
               <a href="#" class="icn icn-share"></a>
            </div>
            <div class="controls">
               <!-- 音量控制按键 -->
               <a href="#" class="icn volume"></a>
               <div class="m-vol">
                  <div class="barbg"></div>
                  <div class="vbg">
                     <div class="curr">
                        <span class="btn"></span>
                     </div>
                  </div>
               </div>
               <!-- 播放方式 -->
               <a href="#" class="icn mode"></a>
               <div class="modetip">随机</div>
               <!-- 播放列表 -->
               <span class="add">
                  <a href="#" class="icn list"></a>
               </span>
               <div class="f-playlist">
                  <div class="listhd">
                     <h4>播放列表（0）</h4>
                     <a href="#" class="addall">
                        <span></span>
                        收藏全部
                     </a>
                     <span class="line"></span>
                     <a href="#" class="clear">
                        <span></span>
                        清除
                     </a>
                     <span class="f-close"></span>
                  </div>
                  <div class="listbd">
                     <div class="listmsk">
                        <div class="msk">
                           <i></i>
                           你还没有添加任何歌曲
                           <br>
                           去首页发现音乐，或在我的音乐收听自己收藏的歌单。
                        </div>
                     </div>
                     <div class="bline"></div>
                     <div class="ask">
                        <a href="#"></a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

   </div>

   <script src="./js/vip.js"></script>
</body>

</html>